<template>
  <transition name="fade">
    <div v-if="visible" class="toast" :class="type">
      <div class="toast-icon" v-if="showIcon">
        <i class="fas" :class="iconClass"></i>
      </div>
      <div class="toast-content">{{ message }}</div>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'Toast',
  data() {
    return {
      visible: false,
      message: '',
      type: 'info',
      duration: 3000,
      showIcon: true,
      timer: null
    }
  },
  computed: {
    iconClass() {
      const iconMap = {
        info: 'fa-info-circle',
        success: 'fa-check-circle',
        warning: 'fa-exclamation-circle',
        error: 'fa-times-circle',
        loading: 'fa-spinner fa-spin'
      }
      return iconMap[this.type] || iconMap.info
    }
  },
  methods: {
    show(options) {
      // 清除之前的定时器
      if (this.timer) {
        clearTimeout(this.timer)
      }
      
      // 如果传入的是字符串，则默认为info类型提示
      if (typeof options === 'string') {
        this.message = options
        this.type = 'info'
        this.duration = 3000
        this.showIcon = true
      } else {
        this.message = options.message || ''
        this.type = options.type || 'info'
        this.duration = options.duration !== undefined ? options.duration : 3000
        this.showIcon = options.showIcon !== undefined ? options.showIcon : true
      }
      
      this.visible = true
      
      // 设置自动关闭，如果duration为0则不自动关闭
      if (this.duration > 0) {
        this.timer = setTimeout(() => {
          this.hide()
        }, this.duration)
      }
      
      // 添加点击关闭功能
      document.addEventListener('click', this.handleDocumentClick)
      
      return this
    },
    
    hide() {
      this.visible = false
      // 移除点击事件监听
      document.removeEventListener('click', this.handleDocumentClick)
    },
    
    handleDocumentClick() {
      this.hide()
    },
    
    // 快捷方法
    info(message, duration) {
      return this.show({
        type: 'info',
        message,
        duration
      })
    },
    
    success(message, duration) {
      return this.show({
        type: 'success',
        message,
        duration
      })
    },
    
    warning(message, duration) {
      return this.show({
        type: 'warning',
        message,
        duration
      })
    },
    
    error(message, duration) {
      return this.show({
        type: 'error',
        message,
        duration
      })
    },
    
    loading(message, duration) {
      return this.show({
        type: 'loading',
        message,
        duration: duration || 0 // 加载提示默认不自动关闭
      })
    }
  },
  beforeDestroy() {
    document.removeEventListener('click', this.handleDocumentClick)
    if (this.timer) {
      clearTimeout(this.timer)
    }
  }
}
</script>

<style scoped>
.toast {
  position: fixed;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 10px 16px;
  border-radius: var(--border-radius-lg);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 2000;
  pointer-events: none;
  max-width: 80%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.toast-icon {
  flex-shrink: 0;
}

.toast-content {
  font-size: var(--font-size-sm);
  text-align: center;
  word-break: break-word;
}

/* 根据类型应用不同样式 */
.toast.success {
  background-color: rgba(82, 196, 26, 0.9);
}

.toast.error {
  background-color: rgba(255, 77, 79, 0.9);
}

.toast.warning {
  background-color: rgba(250, 173, 20, 0.9);
}

.toast.info {
  background-color: rgba(24, 144, 255, 0.9);
}

.toast.loading {
  background-color: rgba(0, 0, 0, 0.7);
}

/* 动画效果 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s, transform 0.3s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
  transform: translate(-50%, 20px);
}

/* iPhone X及以上的底部安全区域适配 */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .toast {
    bottom: calc(50px + env(safe-area-inset-bottom));
  }
}

/* 横屏模式适配 */
@media screen and (orientation: landscape) {
  .toast {
    bottom: 20px;
  }
}
</style> 